<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { useGetFormulaList } from '@fl/api/supplier'
import { SearchTable } from '@fl/components'
import { genOssUrl, oss } from '@fl/logics/oss'

const props = defineProps<{
    categoryId: number | string
    id: string
    title: string
}>()

const { data, isLoading } = useGetFormulaList(ref({ categoryId: props.categoryId, productId: props.id }))

const activeName = ref()

const result = computed(() => {
    return data.value.filter((item: any) => item.id === activeName.value) || []
})

const calculationItemsData = computed<any[]>(() => {
    try {
        return result.value?.[0]?.varData ? JSON.parse(result.value?.[0]?.varData) : []
    }
    catch {
        return []
    }
})

const formulaGridOptions = reactive<VxeGridProps>({
    align: 'left',
    border: 'inner',
    columns: [
        { field: 'formula', title: '计算公式' },
        { field: 'formulaResult', slots: { default: 'formula_result' }, title: '计算结果' },
    ],
    headerRowClassName: 'bg-white text-[#86909C] text-[14px]',
    height: undefined,
})
const formulaTableData = computed(() => {
    return [{ formula: result.value?.[0]?.formula, formulaResult: result.value?.[0]?.result || '-' }]
})

watchEffect(() => {
    if (data.value) {
        activeName.value = data.value?.[0]?.id
    }
})
</script>

<template>
    <el-skeleton v-if="isLoading"
                 :rows="3"
    />

    <div v-else>
        <template v-if="data?.length">
            <el-tabs v-model="activeName"
                     class="demo-tabs"
            >
                <el-tab-pane v-for="item in data"
                             :key="item.id"
                             :label="`步骤${item.step}`"
                             :name="item.id"
                />
            </el-tabs>

            <el-form>
                <el-row>
                    <el-col :span="24"
                            class="mt-20"
                    >
                        <span class="text-[16px] font-semibold">计算项</span>
                    </el-col>

                    <el-col :span="24">
                        <el-row :gutter="50">
                            <el-col v-for="item in calculationItemsData"
                                    :key="item.varName"
                                    :span="12"
                            >
                                <el-row>
                                    <el-col :span="24"
                                            class="mt-20"
                                    >
                                        <span>{{ item.varName }}</span>
                                    </el-col>

                                    <el-col :span="24"
                                            class="mt-8"
                                    >
                                        <el-form-item :prop="item.prop">
                                            <span>{{ item.varValue }}</span>

                                            <span class="ml-16 inline-block truncate text-left">
                                                {{ item.unitName && item.unitType ? `${item.unitName}(${item.unitType})` : '' }}
                                            </span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>

                    <el-col :span="24"
                            class="mt-50"
                    >
                        <span class="text-[16px] font-semibold">计算式</span>
                    </el-col>

                    <el-col :span="24"
                            class="mt-10"
                    >
                        <div class="w-full">
                            <SearchTable v-bind="formulaGridOptions"
                                         :data="formulaTableData"
                            >
                                <template #formula_result="{ row }">
                                    <span class="text-[#dA0004]">{{ row.formulaResult }}</span>
                                </template>
                            </SearchTable>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </template>

        <el-empty v-else
                  h-full
                  :image="genOssUrl(oss.go.nodata)"
        />
    </div>
</template>

<style scoped lang="scss">
:deep(.el-form-item--default) {
    margin-bottom: 0;
}

:deep(.vxe-table--body-wrapper) {
    min-height: 48px !important;
}

:deep(.vxe-grid--toolbar-wrapper) {
    display: none;
}
</style>
